@extends('layouts.front')

@section('content')
<div class="address address-create">
    <form id="form">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">联  系  人</label>
                </div>
                <div class="weui-cell__bd">
                    <input v-model="form.contact_name" class="weui-input" type="text" required placeholder="请输入联系人真实姓名">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">手  机  号</label>
                </div>
                <div class="weui-cell__bd">
                    <input v-model="form.contact_tel" class="weui-input" required type="number" placeholder="请输入手机号">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">所在地区</label>
                </div>
                <div class="weui-cell__bd">
                    <input v-model="form.area" class="weui-input" type="text" required placeholder="请输入联系人所在地区">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">详细地址</label>
                </div>
                <div class="weui-cell__bd">
                    <input v-model="form.address" class="weui-input" type="text"  required placeholder="请输入联系人详细地址">
                </div>
            </div>
        </div>
    </form>

    <div class="bottom-bar">
        <a v-if="!id" @click="back" href="javascript: void(0)" class="bottom-bar-action bar-left">
            返回
        </a>

        <a v-if="id" @click="deleteAddress" href="javascript: void(0)" class="bottom-bar-action bar-left" style="background-color: #ff5722; color: #fff;" >
            删除
        </a>

        <div @click="onSubmit" class="bottom-bar-action">
            保存
        </div>
    </div>
</div>

@section('tabbar')
@endsection

@push('scripts')
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                id: {{ $id }},
                form: {
                    contact_name: '',
                    contact_tel: '',
                    area: '',
                    address: ''
                },
                select: 0,
                backLink: null,
            }
        },
        created() {
            this.select = parseInt('{{ $select }}');
            this.backLink = '/member/address' + (this.select ? '/select' : '');
            this.id && this.show();
        },
        methods: {
            onSubmit() {
                if (this.id) {
                    this.update()
                } else {
                    this.create()
                }
            },
            // 获取地址信息
            show() {
                var loading = weui.loading('加载中...');
                axios.get('/address/' + this.id).then(res => {
                     loading.hide();
                    if (res.data.status === 'success') {
                        this.form = res.data.data
                    }else {
                         weui.alert('地址信息异常');
                    }
                })
            },
            // 新建收货地址
            create() {
                let self = this;
                weui.form.validate('#form', function (error) {
                    if (!error) {
                        var loading = weui.loading('提交中...');
                        $.ajax({
                            url: '/address',
                            type: 'post',
                            dataType: 'json',
                            data: self.form,
                            success: function(res) {
                                if (res.status === 'success') {
                                    weui.toast(res.message, 1000);
                                    window.location.href = self.backLink;
                                }else {
                                    weui.alert(res.message);
                                } 
                            }
                        });
                    }
                });
            },
            // 更新地址
            update() {
                let self = this;
                weui.form.validate('#form', function (error) {
                    if (!error) {
                        var loading = weui.loading('提交中...');
                        $.ajax({
                            url: '/address/' + self.id + '/update',
                            type: 'post',
                            data: self.form,
                            dataType: 'json',
                            success: function(res) {
                                loading.hide();
                                if (res.status === 'success') {
                                    weui.toast(res.message, 1000);
                                    window.location.href = self.backLink;
                                }else {
                                    weui.alert(res.message);
                                }
                            }
                        })
                    }
                    // return true; // 当return true时，不会显示错误
                });
            },
            deleteAddress() {
                var loading = weui.loading('加载中...');
                var self = this;
                $.ajax({
                    url: '/address/' + this.id + '/delete',
                    type: 'post',
                    dataType: 'json',
                    success: function(res) {
                        loading.hide();
                        if (res.status === 'success') {
                            weui.toast(res.message, 1000);
                            window.location.href = self.backLink;
                        }else {
                            weui.alert('地址信息异常');
                        }
                    }
                })
            },
            // 返回
            back() {
                window.location.href = this.backLink;
            }
        }
    })
</script>
@endpush
@endsection
